<template>
  <div class="h-full flex">
    <div id="drawflow" class="w-3/4 bg-gray-100"></div>
    <NodeConfig :node="selectedNode" class="w-1/4 p-4 bg-white shadow" />
  </div>
</template>

<script>
import Drawflow from 'drawflow';
import NodeConfig from './NodeConfig.vue';
import 'drawflow/dist/drawflow.min.css'; // 引入 Drawflow 样式

export default {
  components: { NodeConfig },
  data() {
    return {
      editor: null,
      selectedNode: null,
    };
  },
  mounted() {
    const container = document.getElementById('drawflow');
    this.editor = new Drawflow(container);
    this.editor.start();

    this.editor.registerNode('input', '<div class="p-2 bg-blue-500 text-white">Input</div>', {}, true);
    this.editor.registerNode('process', '<div class="p-2 bg-green-500 text-white">Process</div>', {}, true);
    this.editor.registerNode('output', '<div class="p-2 bg-red-500 text-white">Output</div>', {}, true);

    this.editor.on('nodeSelected', (id) => {
      this.selectedNode = this.editor.getNodeFromId(id);
    });
  },
  methods: {
    save() {
      const workflowData = this.editor.export();
      this.$api.saveWorkflow(workflowData).then((res) => {
        alert(`Workflow saved with ID: ${res.data.id}`);
      });
    },
    run() {
      const workflowData = this.editor.export();
      this.$api.saveWorkflow(workflowData).then((res) => {
        this.$api.runWorkflow(res.data.id).then(() => alert('Workflow running!'));
      });
    },
  },
};
</script>

<style>
#drawflow { height: 100%; }
</style>